<script type="text/javascript" src="../jQuery-slimScroll-1.3.0/jquery.slimscroll.min.js"></script>
<script src="../vendor/Mustache/mustache.js-master/mustache.js"></script>  
<script src="//js.pusher.com/2.2/pusher.min.js"></script> <!-- global -->

<div id="employerNotifContainer">
<?php while($row = mysql_fetch_array($employer_notif)) { ?>

<div style="margin-top:10px; font-size:14px; margin-left:10px;">
		<p>[<?php $date = new DateTime($row['date_created'],new DateTimeZone('Asia/Hong_Kong')); echo $date->format('F d, Y h:i:s ');?>]
    [<?=$row['message']?>]</p>
    <p> check candidates above </p>
    <hr>
</div>

<?php } ?>
</div>



<script type="text/template" id="employernotifTpl">
 	<p>[{{date_created}}]
    [{{{message}}}]</p>
    <p> check candidates above </p>
</script>

<script>
$(function(){
    $('#employerNotifContainer').slimScroll({
        height: '300px'
    });
});
    
</script>

<script type="text/javascript">
$(function(){
  var audioElement2 = document.createElement('audio');
  audioElement2.setAttribute('src', '../media/friendrequest.mp3' );

  audioElement2.addEventListener("load", function() {

  }, true);

    $(document).ready(function(){
         var pusher = new Pusher("<?=PUSHER_APP_KEY?>");
         var channel = pusher.subscribe('my-channel');
    
          channel.bind('my-event2', function(data) {

              console.log(data);
              audioElement2.play();
              var template = $('#employernotifTpl').html();
              var html = Mustache.to_html(template,data);
              $(html).prependTo('#employerNotifContainer').hide().fadeIn();

          });
  
    });
});
</script>